<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				border: 2px solid black;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<!-- 
		 鼠标事件:
		 click
		 dblclick
		 mouseenter
		 mouseleave
		 		 
		 键盘事件
		 keydown
		 keyup
		 keypress:与keydown相同，但只有萤幕可显示的字符才会触发此事件
		 
		 表单事件
		 submit：按下提交钮时，适用于<form>元素
		 change：文字盒的文字产生变化时、select的选项发生改变
		 focus：取得焦点
		 blur：失去焦点
		 
		 窗口事件
		 scroll
		 resize 		 
		 -->
		<div class="box"></div>
		<br><br>
		<input id="txt1" type="text">
		<br><br><br><br><br><br>
		<form action="">
			姓名<input type="text" name="aa" id="txt2">
			<br><br><br>
			电话<input type="number" name="bb" id="txt3">
			<br><br><br>
			<input type="submit" value="提交">
			
		</form>
		
		
		<script>
			$(function() {
				$(".box").mouseenter(function() {
					$(this).css("background", "red");
				});
				
				$(".box").mouseleave(function() {
					$(this).css("background", "green");
				});
				
				$("#txt1").keydown(function(e){
					console.log(e.key);
				});
				
				$("#txt1").change(function(e){
					alert("文字已改变");
				});
				
				$("form").submit(function(){
					var name=$("#txt2").val();
					var tel=$("#txt3").val();
					alert(name+"电话:"+tel+"资料已提交服务器");
				})
			});
		</script>
	</body>
</html>
